<template>
  <div>
    <div class="btn">
      <el-button type="success" @click="dialogFormVisible = true" size="small">
        导入
      </el-button>
      <el-button size="small" type="primary" @click="exportData">
        导出
      </el-button>
    </div>
    <!-- excel上传组件 -->
    <el-dialog v-model="dialogFormVisible" title="导入">
      <el-upload
        class="upload-demo"
        :action="importDataUrl"
        :headers="headers"
        name="excel"
        :on-success="handlerSuccess"
        :on-error="handError"
      >
        <el-button type="primary">上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传一个文件，文件大小不能超过1MB
          </div>
        </template>
      </el-upload>
    </el-dialog>
    <!-- 表格 -->
    <div>
      <el-table
        :data="categoryList"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="imageUrl" label="图标">
          <template #default="scope">
            <img
              v-if="scope.row.imageUrl"
              :src="scope.row.imageUrl"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" />
        <el-table-column prop="address" label="状态">
          <template #default="scope">
            <span>{{ scope.row.status === 1 ? '正常' : '不正常' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { GetCategoryByPid, exportCateData } from '@/api/category.js'
import { useApp } from '@/pinia/modules/app'
const categoryList = ref([])
const loadData = async parentId => {
  const { data } = await GetCategoryByPid(parentId)
  categoryList.value = data
}

onMounted(() => {
  loadData(0)
})
//excel上传下载
//对话框的显示与隐藏
const dialogFormVisible = ref(false)
//接口地址
const importDataUrl = ref(
  'http://localhost:8081/admin/product/category/importData'
)
//设置headers
const headers = ref({ token: useApp().authorization.token })
//上传成功
const handlerSuccess = response => {
  if (+response.code === 200) {
    dialogFormVisible.value = false
    loadData(0)
    ElMessage.success('上传成功')
  } else {
    ElMessage.error(response.message)
  }
}
//上传失败
const handError = error => {
  ElMessage.error('网络错误')
}
//导出函数
const exportData = () => {
  exportCateData().then(res => {
    const blob = new Blob([res])
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = '分类数据.xlsx'
    link.click()
  })
}
//懒加载
const load = async (row, treeNode, resolve) => {
  const { data } = await GetCategoryByPid(row.id)
  resolve(data)
}
</script>
<style>
.btn {
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  margin-bottom: 15px;
}
</style>
